<template>
  <div>


    <div class="el-dialog__wrapper" style="z-index: 2064;" v-show="isTrue">

      <div role="dialog" aria-modal="true" aria-label="信息查看" class="el-dialog" style="margin-top: 15vh;">
        <div class="el-dialog__header"><span class="el-dialog__title">信息查看</span>
          <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="close()"><i
            class="el-dialog__close el-icon el-icon-close"></i></button>
        </div>
        <div class="el-dialog__body">
          <form class="el-form el-form--inline" ref="map" :model="map">
            <div class="el-card is-always-shadow"><!---->
              <div class="el-card__body">
                <div class="el-divider el-divider--horizontal">
                  <div class="el-divider__text is-center">基础信息</div>
                </div>
                <div class="el-row">
                  <div class="el-col el-col-12">
                    <div>
                      <div class="el-form-item"><label class="el-form-item__label">用户类型:</label>
                        <div class="el-form-item__content"><span class="">用户</span><!----></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="el-row">
                  <div class="el-col el-col-12">
                    <div>
                      <div class="el-form-item"><label class="el-form-item__label">手机号:</label>
                        <div class="el-form-item__content"><span>{{map.uphone}}</span><!----></div>
                      </div>
                    </div>
                  </div>
                  <div class="el-col el-col-12">
                    <div>
                      <div class="el-form-item"><label class="el-form-item__label">昵称:</label>
                        <div class="el-form-item__content"><span>{{map.unickname}}</span><!----></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="el-row">
                  <div class="el-col el-col-12">
                    <div>
                      <div class="el-form-item"><label class="el-form-item__label">注册时间:</label>
                        <div class="el-form-item__content"><span>{{map.userCreate}}</span><!----></div>
                      </div>
                    </div>
                  </div>
                  <div class="el-col el-col-12">
                    <div>
                      <div class="el-form-item"><label class="el-form-item__label">状态:</label>
                        <div class="el-form-item__content"><span class="" v-if="map.status==0">正常</span>
                          <span class="" v-if="map.status==1">禁用</span>
                          <!----></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <br>
            <div class="el-card is-always-shadow"><!---->
              <div class="el-card__body">
                <div class="el-divider el-divider--horizontal">
                  <div class="el-divider__text is-center">基础信息</div>
                </div>
                <div>
                  <div class="el-row">
                    <div class="el-col el-col-12">
                      <div>
                        <div class="el-form-item"><label class="el-form-item__label">用户头像:</label>
                          <div class="el-form-item__content">
                            <div class="demo-image">
                              <div class="block">
                                <div class="el-image" style="width: 100px; height: 100px;">
                                  <div class="el-image__error">
                                    <el-avatar shape="square" :size="100" :src="map.uimage"></el-avatar>
                                  </div>
                                </div>
                              </div>
                            </div><!----></div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="el-row">
                    <div class="el-col el-col-12">
                      <div>
                        <div class="el-form-item"><label class="el-form-item__label">性别:</label>
                          <div class="el-form-item__content"><span class="" v-if="map.usex == 0">保密</span>
                            <span class="" v-if="map.usex == 1">男</span>
                            <span class="" v-if="map.usex == 2">女</span>

                            <!----></div>
                        </div>
                      </div>
                    </div>
                    <div class="el-col el-col-12">
                      <div>
                        <div class="el-form-item"><label class="el-form-item__label">年龄:</label>
                          <div class="el-form-item__content"><span>{{map.age}}</span><!----></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="el-form-item"><label class="el-form-item__label">备注:</label>
                    <div class="el-form-item__content"><span>{{map.uremark}}</span><!----></div>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <div class="el-row" style="margin-top: 17px;">
            <button type="button" class="el-button el-button--danger el-button--mini is-plain"
                    style="float: right; margin-left: 6px;" @click="close()"><!----><!----><span>取 消</span></button>
          </div>
        </div><!----></div>
    </div>



    <!--  上方模糊查询表单  -->
    <div>
      <el-form :inline="true" size="mini" v-model="mohu">
        <el-form-item label="用户手机：">
          <el-input v-model.trim="mohu.uphone"></el-input>
        </el-form-item>
        <el-form-item label="昵称：">
          <el-input v-model.trim="mohu.uname"></el-input>
        </el-form-item>

        <el-form-item label="状态：">
          <el-select v-model.trim="mohu.status" placeholder="状态" style="width: 85px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.vname"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
          <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--数据表格-->
    <div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="uid"
          label="编号">
        </el-table-column>


        <el-table-column
          prop="uphone"
          label="用户手机">

          <template slot-scope="scope">
            <el-button @click="tanchu(scope.row)" type="text">{{scope.row.uphone}}</el-button>
          </template>

        </el-table-column>


        <el-table-column
          prop="uname"
          label="昵称">
        </el-table-column>

        <el-table-column prop="userType" label="用户类型">
          <template slot-scope="scope">
            <div v-if="scope.row.userType === 1">
              学员
            </div>
            <div v-else>
              讲师
            </div>
          </template>

        </el-table-column>
        <el-table-column
          prop="userCreate"
          label="注册时间">
        </el-table-column>

        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-text="禁用"
              inactive-text="正常"
              active-color="#ff4949"
              inactive-color="#13ce66"
              @change="handleClose(scope.row)">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button type="success" @click=upd(scope.row) size="mini">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--修改-->
    <div>
      <el-dialog title="信息修改" :visible.sync="dialogFormVisible" width="400px">
        <el-form :model="openData">
          <el-form-item label="手机号：" :label-width="formLabelWidth">
            <el-input v-model="openData.uname" :disabled="true" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户昵称：" :label-width="formLabelWidth">
            <el-input v-model="openData.unickname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别：" :label-width="formLabelWidth">
            <el-radio-group v-model="openData.usex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
              <el-radio :label="3">保密</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄：" :label-width="formLabelWidth">
            <el-input v-model="openData.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="uremark" v-model="openData.uremark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addform">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <el-pagination style="text-align: right;margin-top: 20px"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="map.current"
                   :page-sizes="[4,6,8,10]"
                   :page-size="map.size"
                   :total="total"
                   layout="total,sizes,prev,pager, next">
    </el-pagination>
  </div>
</template>

<script>
  import qs from 'qs';

  export default {
    name: "Student",
    data() {
      return {

        isTrue:false,
        map: {
          uname: '',
          uphone: '',
          status: '',
          uimage:'',
          current: 1,
          size:4,
        },
        mohu:{
          uphone:'',
          uname:'',
          status:'',

        },
        total:1,
        options: [{
          value: 1,
          vname: '禁用'
        }, {
          value: 0,
          vname: '正常'
        }],
        formLabelWidth: '120px',
        value: '',
        value1: true,
        tableData: [],
        dialogFormVisible: false,
        dialogFormVisiblee: false,
        openData: {
        }, pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2: '',
      }
    },
    methods: {

      getShowData() {
        this.$axios.post("student/stu/user/findAll",qs.stringify(this.map)).then(r => {
          //alert(JSON.stringify(r.data));
          this.tableData = r.data.records;
          this.map.current=r.data.current;
          this.map.size=r.data.size;
          this.total=r.data.total;
        })
      },
      //状态开关
      handleClose(done) {
        let obj = {
          uid:done.uid,
          status: done.status,
        }
        this.$axios.post("student/stu/user/updStudent", qs.stringify(obj)).then(res => {
         this.getShowData();
        })

      },
      //查询按钮
      handleCheck() {
        this.map=this.mohu;
        this.getShowData()
      }
      ,
      //修改表单数据
      addform() {
        //alert(JSON.stringify(this.openData))

        this.$axios.post("student/stu/user/updStudent", qs.stringify(this.openData)).then(res => {

          //alert(JSON.stringify(res.data));
          if (res.data) {
            alert("修改成功");
            this.getShowData();
          } else {
            alert("修改失败");
            this.getShowData();
          }
          this.dialogFormVisible=false;
        })
      },
      tanchu(row){
        //alert(JSON.stringify(row));
        this.map=row;
        this.isTrue=!this.isTrue;
      },
      close(){
        this.isTrue=!this.isTrue;
      },
      /*分页*/
      handleSizeChange(val) {
        this.map.size=val;
        this.getShowData();
        //console.log(`每页 ${val}条`);
      },
      handleCurrentChange(val) {
        this.map.current = val;
        this.getShowData();
      },
      upd(row) {
        this.dialogFormVisible = true;
        this.openData = row;
       // alert(JSON.stringify(this.openData));
      },
      handleReset() {
        Object.assign(this.$data.mohu, this.$options.data().mohu);
        this.getShowData();
        //location.reload();
      }
    },
    created() {
      this.getShowData();
    }
  }
</script>

<style scoped>

</style>
